<template>
  <view class="bg">
    <!-- <button class="login-btn" @click="loginClick">登录</button> -->
		<view class="bg-img">
      <image src="@/static/img/my_bg.png"></image>
    </view>
		<view class="detail-view mb20">
			<view class="top-view">
				<view class="font15 white mb10">Hey,{{userInfo.nickName||'-'}}</view>
				<view class="font13 white mb10">{{desensitizePhone(userInfo.phone)}}</view>
				<view class="panel-view">
					<view class="flex-center-between">
						<view class="flex-center">
							<view class="level-tag font12 mr20">lv0</view>
							<view class="card-panel font11">会员享受双倍积分</view>
						</view>
						<view class="head-bg" @click="loginClick">
							<view class="real-head">
                <image class="head-pic mb10" mode="aspectFit"  :src="getImageUrl(userInfo.avatar)"></image>
              </view>
						</view>
					</view>
				</view>
			</view>
		</view>
    <view class="pd20">
      <view class="cell flex-center-between mb20" @click="gotoOrder">
        <text>我的订单</text>
        <text class="iconfont">&#xe60e;</text>
      </view>
      <view class="cell flex-center-between mb20" @click="gotoAddress">
        <text>地址管理</text>
        <text class="iconfont">&#xe60e;</text>
      </view>
    </view>
  </view>
</template>

<script>
import {getStore} from "@/config/util";

export default {
  name: 'index',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      code: '', // 存储临时登录凭证
      userInfo:{},
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.userInfo = getStore('userInfo',1)||{};
  },
  methods: {
    desensitizePhone(phone) {
      if (!phone || typeof phone !== 'string') return '';
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    gotoOrder(){
      uni.switchTab({
        url: '/pages/order/index',
        success: () => {},
        fail: (err) => {}
      });
    },
    gotoAddress(){
      uni.navigateTo({
        url: '/pages/my/address'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.login-btn{
  margin-top: 300rpx;
  background-color: var(--primary);
}
.bg{
	.bg-img{
		width: 100%;
		height: 750rpx;
		background-color: darkgoldenrod;
    image{
      width: 100%;
      height: 100%;
    }
	}
	.detail-view{
		position:relative;
		.top-view{
			width: 100%;
			position:absolute;
			padding: 0 30rpx;
			top:-250rpx;
			.panel-view{
				width: 100%;
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: white;
				.level-tag{
					border:1rpx solid #eee;
					border-radius: 4rpx;
					padding:2rpx 10rpx;
				}
				.card-panel{
					background-color: #eee;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 15rpx;
					border-radius: 20rpx;
				}
				.head-bg{
					position: relative;
					.real-head{
						position: absolute;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						background-color: white;
						right: 0;
						top: -100rpx;
            .head-pic{
              width: 100rpx;
              height: 100rpx;
              border-radius: 50rpx;
            }
					}
				}
			}
		}
	}
  .pd20{
    padding: 20rpx;
  }
  .cell{
    background-color: white;
    border-radius: 10rpx;
    width: 100%;
    padding: 30rpx;
  }
}

</style>